<template>
	<view>
		<uni-nav-bar statusBar=true color="#000" fixed="true" left-icon="back" title="联系信息">
		</uni-nav-bar>
		<view class="prompt">
			根据监管要求，请您在购买产品前完善个人信息。该信息仅用于在本平台购买金融机构发行的金融产品或服务，我们将严格保密您的个人信息
		</view>
		<view class="content1">
			<view class="phone">
				<label for="phone">联系方式（必填）</label>
				<input type="text" value="" id="phone" class="phone-input" />
			</view>
			<view class="address">
				<label for="address">详细地址 </label>
				<input type="text" id="address-input" class="address-input" value="" placeholder="路/街+门牌号,例南京路888号" />
			</view>
			<view class="email">
				<label for="email">邮箱地址 </label>
				<input type="email" id="email" value="" class="email-input" placeholder="用于接收电子保单和年度账单" />
			</view>
		</view>
		<view class="content2">
			<view class="professional">
				<text>职业类型</text>
				<view class="picker-item">
					<picker mode="selector" :range="range" :value="index" >
						<view>{{range[index]}}</view>
					</picker>
				</view>
			</view>
			<view class="region">
				<text>工作地区</text>
				<view class="">
					<view class="city-item">
						<picker mode="region" :range="range" :value="index" >
							<view>{{range[index]}}</view>
						</picker>
					</view>
					<view class="area-item">
						<picker mode="region" :range="range" :value="index" >
							<view>{{range[index]}}</view>
						</picker>
					</view>
				</view>
			</view>
		</view>
		<!-- 抽屉 -->
		<uni-popup ref="popup" type="bottom" class="popup">
			<uni-popup-message type="info" message="成功消息" :duration="2000">
				<view class="popup-message">
					<view class="title">详细地址填写规范</view>
					<view class="text">
						<text style="color:#000 ;margin-right: 10rpx;">•</text>
						<text>无需包含“省/市/区/自治区/自治州/直辖市”</text>
					</view>
					<view class="text">
						<text style="color:#000 ;margin-right: 10rpx;">•</text>
						<text>需包含“路/街/村/组/号/院/厦/楼/广场”其中之一</text>
					</view>
					<view class="text">
						<text style="color: #ff7846;">如：樱花路66号</text>
					</view>
					<button type="default" size="mini" class="popup-btn" @click="close">我知道了</button>
				</view>

			</uni-popup-message>
		</uni-popup>
		<view class="btn">
			<button class="btn" @tap="toBuy">确认购买</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				range: ["一般职员", "公务员", "自由职业"],
				index: 0
			}
		},
		onLoad() {
			this.open()
		},
		methods: {
			open() {
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']

				this.$refs.popup.open()
				this.$refs.popup.closeMask()
				this.$refs.popup.disableMask()
			},
			close() {
				this.$refs.popup.close()
			},
			toBuy(){
				uni.navigateTo({
					url:'../fund_buy/fund_buy?openPopup='+true
				})
			}
		}
	}
</script>

<style lang="scss">
	.page {
		position: relative;
		height: 100vh;
	}

	.prompt {
		height: 200rpx;
		padding: 24rpx;
		color: #8a8a8a;
	}

	.phone,
	.address,
	.email {
		height: 100rpx;
		display: flex;
		align-items: center;
	}

	.content1 {
		background-color: white;
		padding: 0 24rpx;
		margin-bottom: 40rpx;
	}

	.address-input,
	.email-input {
		padding-left: 20rpx;
	}

	.content2 {
		background-color: white;
		padding: 0 24rpx;
		color: #8a8a8a;

		.professional {
			display: flex;
			height: 100rpx;
			line-height: 100rpx;
		}

		.picker-item {
			height: 100rpx;

			width: 550rpx;
			line-height: 100rpx;
			padding-left: 20rpx;

		}

		.region {
			display: flex;
			height: 165rpx;

		}

		.area-item,
		.city-item {
			padding-left: 20rpx;
			height: 50rpx;

		}
	}

	.btn {
		width: 100%;
		height: 86rpx;
		line-height: 86rpx;
		background-color: #3476f1;
		color: white;
		font-size: 30rpx;
		padding: 0;
		margin: 0;
		position: absolute;
		bottom: 0;

	}

	//抽屉
	.popup-message {
		height: 400rpx;
		width: 700rpx;
		margin: 0 auto;
		border-radius: 10rpx;
		text-align: center;
		background-color: white;
		overflow: hidden;
		padding: 0 24rpx;

		.title {
			font-size: 30rpx;
			margin: 20rpx 0;

		}

		.text {
			margin-top: 20rpx;
			// margin-bottom:0rpx ;
			text-align: left;
			color: #999;
		}

		.popup-btn {
			background-color: #3476f1;
			color: white;
			font-size: 30rpx;
			width: 100%;
			height: 90rpx;
			line-height: 90rpx;
			margin-top: 70rpx;
		}
	}
</style>
